// tinymce.init({
//   selector: 'textarea'  // 这里的选择器，将会被替换为富文本编辑器
// });
initEditor()


// 页面处理，获取分类
axios.get('/my/category/list').then(res => {
  let {status,data} = res.data
  if (status === 0) {
    let str = ''
    data.forEach(item => {
      str += `<option value="${item.id}">${item.name}</option>`
    })
    // 把option放到select中
    $('select[name=cate_id]').append(str)  // html()会覆盖所有代码  append 追加
    // 更新渲染
    let form = layui.form
    form.render('select')
  }
})



// 封面处理 初始剪裁效果
// 1. 初始化剪裁框
// 1.1) 初始化图片裁剪器
let $image = $('#image')
// 1.2) 裁剪选项
let options = {
  aspectRatio: 400 / 280,
  preview: '.img-preview'
}
// 1.3) 初始化裁剪区域
$image.cropper(options);
// 2. 点击 “选择封面” 能够选择图片
$('button:contains("选择封面")').on('click',function () {
  $('#file').trigger('click');
});

// 3. 图片切换的时候，更换剪裁区的图片
$('#file').on('change',function () {
  if (this.files.length > 0) {
    // 3.1) 找到文件对象
    let fileObj = this.files[0];
    // 3.2) 创建url
    let url = URL.createObjectURL(fileObj);
    // 3.3) 更换图片
    $image.cropper('replace', url);
  }
});

// 提交表单收集数据提交完成
$('form').on('submit',function (e) {
  e.preventDefault()
  let fd = new FormData(this)
  // 修改content
  fd.set('content',tinyMCE.activeEditor.getContent())
  // 图片剪裁，转成文件对象格式，追加到fd
  let canvas = $image.cropper('getCroppedCanvas',{width:400,height:280})
  // 把canvas转换成文件对象格式
  // console.log(canvas)
  canvas.toBlob(function (blob) {
    // 追加对象到fd中
    fd.append('cover_img',blob)
    // 检测fd 中的数据
    fd.forEach((item,index) => console.log(item,index))
    // 发送请求，完成添加
    axios.post('/my/article/add',fd).then(res => {
      // console.log(res)
      let {status,message} = res.data
      if (status === 0) {
        layer.msg(message)
        // 添加成功，跳转到文章列表页
        // location.href = './list.html'
      }
    })
  })
})


